<template>
<div>
    <p>{{msg}}</p>
    <p>{{$store.state.a.count}}---{{count}}</p>
    <p>
      <button @click="$store.commit('add',1)">+1</button>
      <button @click="$store.commit('reduce')">-1</button>
    </p>


    <p>
      {{$store.state.a.info}} --- {{info}}
    </p>
  </div>
</template>

<script>
import store from '@/vuex/mystore';
  import {
    mapState,
    mapMutations,
    mapGetters,
    mapActions
  } from 'vuex';

export default {
    data() {
      return {
        msg: 'Hellow Vuex!'
      }
    },
    methods:{
      ...mapMutations(['add','reduce']),
      ...mapActions(['addAction','reduceAction'])
    },
    computed: {
      count(){
        return this.$store.state.a.count;
      },
      info(){
        return this.$store.state.a.info;
      }
    },
    store
  }
</script>

